<template>
  <div class="feelings">
    <!-- 标签栏 -->
    <div class="label">
      <div class="label-title">
        <img :src="label_icon" alt="" />
      </div>
      <div class="labels">
        <ul class="infinite-list">
          <li
            class="label_list"
            v-for="(item, index) in poetrys"
            :key="item.id"
            :class="{ active: active == item.id }"
            @click="getpoetry(item, index)"
          >
            {{ item.poetryName }}
          </li>
        </ul>
      </div>
    </div>
    <!-- 内容部分 -->
    <div class="contents">
      <div class="poetry">
        <el-carousel :interval="7000" type="card" :autoplay="false" @change="Cardclick">
          <el-carousel-item v-for="(poetry, index) in swiperdata" :key="index">
            <div class="poetrys">
              <span class="poetry-title">{{ poetry.poetryName }}</span>
              <span class="poetry-writer"
                ><i class="el-icon-edit"></i> {{ poetry.author }}</span
              >
              <p>{{ poetry.first }}</p>
              <p>{{ poetry.second }}</p>
              <p>{{ poetry.third }}</p>
              <p>{{ poetry.fourth }}</p>
            </div>
          </el-carousel-item>
        </el-carousel>
        <div class="parsing">
          <div class="parsing-text">
            <p>{{ parsing }}</p>
          </div>
          <div class="parsing-img">
            <img :src="parsingimg" alt="" />
          </div>
        </div>
      </div>
    </div>
    <!-- -->
  </div>
</template> 

<script>
import { getpoetryWant } from "../api/test";
export default {
  data() {
    return {
      label_icon:
        "https://www.imageoss.com/images/2021/10/09/e2fd0167927a514529f063da4f58265f98e9b9004bad24a3.png",
      active: 1,
      poetrys: [],
      swiperdata: [],
      parsing: " ",
      parsingimg: " ",
    };
  },
  methods: {
    getpoetry(item) {
      // 改变绑定值从而动态改变class
      this.active = item.id;
      //数组下标从0开始 id为1 所以对应-1
      let begin = item.id - 1;
       let end = this.poetrys.length;
      // 轮播数据 截取三个
      this.swiperdata = this.poetrys.slice(begin, end);
      // 解析数据 传入id对应数组下标取值
      this.parsing = this.poetrys[begin].parsing;
      // 图片数据
      this.parsingimg = this.poetrys[begin].img;
    },
   Cardclick(next) {
      console.log(111);
      //下标跟随当前id
      this.active = this.poetrys[next].id;
      // 解析数据
      this.parsing = this.poetrys[next].parsing;
      // 图片数据
      this.parsingimg = this.poetrys[next].img;
    },
  },
  mounted() {
    // 发起请求
    this.$http.post("/api/user/select_theWant", {}).then((response) => {
      //初始化加载数据
      // console.log("请求数据",response.data);
      this.poetrys = response.data;
      this.swiperdata = response.data;
      this.parsing = response.data[0].parsing;
      this.parsingimg = response.data[0].img;
    });
    // getpoetryWant().then(()=>{}).catch((err)=>{
    //   //初始化加载数据
    //   this.poetrys=err.data.data;
    //   this.swiperdata=err.data.data;
    //   this.parsing=err.data.data[0].parsing;
    //   this.parsingimg=err.data.data[0].img;
    // })
  },
};
</script>

<style scoped>
@import "../css/feelings.css";
.el-carousel__item {
  border-radius: 10px;
  border: 2px solid #007991;
}
.active {
  display: inline-block;
  color:#007991;
  line-height: 40px;
  margin: 0 15px;
  border-bottom: 2px solid #007991;
}
</style>
